/*
 * @Descripttion: $0
 * @version: 
 * @Author: linPing
 * @Date: 2019-10-29 13:33:00
 * @LastEditTime: 2019-10-30 14:51:55
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Fragment} from 'react';
import NavigationUtil from '../navigator/NavigationUtil'
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  RefreshControl,
  ActivityIndicator,
} from 'react-native';

const CITY_NAMES = ['北京','上海','深圳','重庆','山东','山西','河北','河南']
export default class FlatListComponent extends React.Component{
  constructor(props){
    super(props)
    this.canLoadMore = true
    this.showLoadMore=false
    this.state={
      isLoading:false,
      dataArray:this.props.data,
      data:this.props.data,

    }
    this.hideFooter = this.props.hideFooter
    this.pageIndex=this.props.pageIndex

  }

  loadData(refreshing){

    if(refreshing){
      this.setState({
        isLoading:true
      })

      this.props.onRefresh(()=>{
        this.setState({
          isLoading:false
        })
      })
     
    }else{
      this.props.onLoadMore(++this.pageIndex)
    }
  }
  
  _genIndicator(){
    
    if(this.hideFooter) return null
    return this.props.pageIndex<this.props.pageTotal?
    <View style={styles.indicatorWarp}>
      <ActivityIndicator
        size = {'large'}
        animating = {true}
      />
      <Text  style={styles.indicatorText}>正在加载</Text>
    </View>: <Text style={{color:"#999",fontSize:12,marginVertical:10,textAlign:'center'}}> 没有更多数据了 </Text>


  }
  render(){
    
    return (
      
      <View style={styles.sectionContainer}>

        <FlatList
          data = {this.props.data}
          // renderItem = {data => this._renderItem(data)}
          renderItem = {data => this.props.renderItem(data)}

          refreshControl = {
            <RefreshControl
              title={'Loading'}
              // colors={['blue']}
              // tintColor = {'blue'} //ios
              // titleColor = {'blue'} //ios
              refreshing = {this.state.isLoading}
              onRefresh = {()=>{
                this.loadData(true)
              }}
            />
          }
          
          ListFooterComponent = {()=>this._genIndicator()}
          //  onEndReached={()=>this.loadData(false)}
          onEndReached={()=>{
       
            console.log('---onEndReached----');
            setTimeout(()=>{
            
              if (this.canLoadMore && this.props.pageIndex<this.props.pageTotal) {//fix 滚动时两次调用onEndReached https://github.com/facebook/react-native/issues/14015
              
                this.loadData(false);
                this.canLoadMore = false;
              }
            },100)
            }} 
          onEndReachedThreshold={0.1} 
          onMomentumScrollBegin={() => {
            this.canLoadMore = true; //fix 初始化时页调用onEndReached的问题
            console.log('---onMomentumScrollBegin-----')
           }}
        />
      </View>
    )
  }
 
};

const styles = StyleSheet.create({

  sectionContainer: {
  //  marginBottom: 32,
  paddingVertical:10,
  // paddingHorizontal: 24,
  //  paddingBottom:62,
 
  },
  // sectionTitle: {
  //   fontSize: 24,
  //   fontWeight: '600',
  //   color:'#333',
  // },
  // itemBox:{
  //   flex:1,
  //   backgroundColor:'#678',
  //   marginBottom:10,
  //   height:200,
  //   justifyContent:'center',

  // },
  // itemText:{

  //   color:'#fff',
  //   textAlign:'center',
 
    
  // },
  indicatorWarp:{
    marginTop:10,
    alignItems:'center'
  },
  indicatorText:{
    margin:10
  }
 
});


